<template>
	<div>
		<template v-if="show==1">
			<div class="login">
				<div class="logo">
					<img src="../../../public/ico/logo.png"/>
					<span>手机号注册/登录</span>
				</div>	
				<p>
					<input type="text" placeholder="请输入手机号"/>
				</p>
				<p>
					<input type="number" placeholder="请输入验证码"/>
					<a href="#">获取验证码</a>
				</p>
				<p>
					<input type="submit" value="一键注册/登录"/>
				</p>
				<h3>
					<span @click="show=3">非大陆手机号登录</span>
					<span @click="show=2">账号密码登录</span>
				</h3>
				<div class="tx">
					<img src="../../../public/ico/wx.png"/>
					<img src="../../../public/ico/qq.png"/>
				</div>
				<span><input type="checkbox" />未注册游侠客账号的手机，登录时将同时注册，登录代表您已同意<em>《服务协议》</em>和<em>《隐私政策》</em></span>
				<label>体验游侠客微信小程序</label>
			</div>
		</template>
		<template v-if="show==2">
			<div class="login">
				<div class="logo">
					<img src="../../../public/ico/logo.png"/>
					<span>账号密码登录</span>
				</div>	
				<p>
					<input type="text" placeholder="请输入账号" v-model="uname"/>
				</p>
				<p>
					<input type="password" placeholder="请输入密码" v-model="password"/>
				</p>
				<p>
					<input type="submit" value="登录" @click="sub()" :disabled="!che"/>
				</p>
				<h3>
					<span>忘记密码</span>
					<span @click="show=1">验证码登录</span>
				</h3>
				<div class="tx">
					<img src="../../../public/ico/wx.png"/>
					<img src="../../../public/ico/qq.png"/>
				</div>
				<span><input type="checkbox" @change="checkbox()"/>登录即代表您已同意<em>《服务协议》</em>和<em>《隐私政策》</em></span>
				<label>体验游侠客微信小程序</label>
			</div>
		</template>
		<template v-if="show==3">
			<div class="login">
				<div class="logo">
					<img src="../../../public/ico/logo.png"/>
					<span>邮箱注册/登录</span>
				</div>	
				<p>
					<input type="text" placeholder="请输入邮箱"/>
				</p>
				<p>
					<input type="number" placeholder="请输入验证码"/>
					<a href="#">获取验证码</a>
				</p>
				<p>
					<input type="submit" value="一键注册/登录"/>
				</p>
				<h3>
					<span @click="show=1">手机号登录</span>
					<span @click="show=2">验证码登录</span>
				</h3>
				<div class="tx">
					<img src="../../../public/ico/wx.png"/>
					<img src="../../../public/ico/qq.png"/>
				</div>
				<span><input type="checkbox" />未注册游侠客账号的手机，登录时将同时注册，登录代表您已同意<em>《服务协议》</em>和<em>《隐私政策》</em></span>
				<label>体验游侠客微信小程序</label>
			</div>
		</template>
	</div>
</template>

<script>
	import Cookies from "js-cookie"
	export default{
		name:'Login',
		data(){
			return{
				show:1,
				uname:'',
				password:'',
				che:false
			}
		},
		methods:{
			sub(){
				if (this.uname==''&&this.password=='') {
					return false
				}
					let that=this//备份
					this.axios.get('/api/logindata.json').then((res)=>{
						let data=res.data.msg
						for (let i in data) {
							if (that.uname==data[i].name&&that.password==data[i].pass) {
								Cookies.set("id",data[i].id)
								Cookies.set("name",data[i].name)
								this.$router.push('/')
							}
						}
						
					}).catch((error)=>{
						console.log(error)
					})
				
			},
			checkbox(){
				this.che=!this.che
			}
		}
	}
</script>

<style scoped>
	.login{
		padding:1rem 1rem 0;
	}
	.login .logo{
		width: 100%;
		text-align: center;
	}
	.login .logo img{
		width: 2rem;
		height: 2rem;
	}
	.login .logo:first-child span{
		font-size: 0.4rem;
		font-weight: bold;
		display: block;
		color: black;
	}
	.login p{
		width: 100%;
		height: 1rem;
		padding-top: 0.5rem;
	}
	.login p input{
		width: 100%;
		height: 100%;
		border: none;
	}
	.login p input[type=number]{
		width: 70%;
		height: 100%;
	}
	.login p:nth-child(3) a{
		font-size: 0.4rem;
		width: 30%;
		text-align: right;
		color: #FFA500;
		text-decoration: none;
	}
	.login p input[type=submit]{
		background: #FFA500;
		border-radius: 0.2rem;
		border: none;
		font-size: 0.45rem;
		color: white;
	}
	.login h3{
		width: 100%;
		height: 1rem;
		font-size: 0.4rem;
		padding-top: 0.3rem;
		display: flex;
		justify-content: space-between;
		color: #808080;
	}
	.login .tx{
		padding-top: 4rem;
		width: 100%;
		height: 2rem;
		display: flex;
		justify-content: space-around;
	}
	.login .tx img{
		width: 1rem;
		height: 1rem;
	}
	.login label{
		display: block;
		text-align: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding-top: 0.4rem;
		padding-bottom: 0.4rem;
		font-size: 0.4rem;
		border-top: 0.01rem solid gainsboro;
		color: orange;
	}
	.login span{
		color: gray;
	}
	.login span em{
		color: black;
	}
</style>
